import { useState, useCallback } from 'react'
import Button from './Button'

function App() {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(0)
  const [count3, setCount3] = useState(0)
  const handleClickButton1 = () => {
    setCount1(count1 + 1);

  }
  const handleClickButton2 = useCallback(() => {
      setCount2(count2 + 1);
  }, [count2])
    
  return (
    <div className="App">
      <div>
        <Button onClickButton={handleClickButton1}>button1</Button>  
      </div>  
      <div>
        <Button onClickButton={handleClickButton2}>button2</Button>  
      </div>
      <div>
        <Button onClickButton={() => setCount3()}>button3</Button>  
      </div>  
    </div>
    
  )
}

export default App
